const path=require('path');
const webpack=require('webpack');
const htmlWebpackPlugin=require('html-webpack-plugin');

const vueLoaderPlugin=require('vue-loader/lib/plugin');


// 这个配置文件，其实就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象;
module.exports={
	// 大家已经学会了举一反4，大家觉得，在配置文件中，需要手动指定 入口 和 出口;
	entry: path.join(__dirname,'./src/main.js'), // 入口，表示要使用 webpack 打包哪个文件;
	output: { // 输出文件相关的配置;
		path: path.join(__dirname,'./dist'), // 指定 打包好的文件，输出到哪个目录中去;
		filename: 'bundle.js'  // 这是指定 输出的文件的名称;
	},
	plugins: [ // 配置插件的节点
		new htmlWebpackPlugin({ // 创建一个在内存中生成 HTML 页面的插件
			template: path.join(__dirname,'./src/index.html'), //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面;
			filename: 'index.html', // 指定生成页面的名称;
		}),
		new vueLoaderPlugin()
	],
	module: { // 这个节点，用于配置所有的 第三方模块 加载器
		rules: [ // 所有第三方模块的匹配规则
			{
				test: /\.css$/,
				use: ['style-loader','css-loader'] // 配置处理 .css 文件的第三方 loader 规则
			},
			{
				test: /\.less$/,
				use: ['style-loader','css-loader','less-loader'] // 配置处理 .less 文件的第三方 loader 规则
			},
			{
				test: /\.scss$/,
				use: ['style-loader','css-loader','sass-loader'] // 配置处理 .scss 文件的第三方 loader 规则
			},
			{
				test: /\.(jpg|png|gif|bmp|jpeg)$/,
				use: 'url-loader?limit=7632&name=[hash:8]-[name].[ext]' // 处理 图片路径的 loader
				// limit 给定的值，是图片的大小，单位是 byte，如果我们引用的图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串，如果图片小于给定的limit值，则会被转为base64格式的字符串
			},
			{
				test: /\.(ttf|eot|svg|woff|woff2)$/,
				use: 'url-loader' // 处理 字体文件的 loader
			},
			{
				test: /\.js$/,
				use: 'babel-loader', // 处理 字体文件的 loader
				exclude: /node_modules/  //配置 Babel 来转换高级的ES语法
			},
			{
				test: /\.vue$/,
				use: 'vue-loader', // 处理 .vue 文件的 loader
			},
		]
	},
	resolve: {
		alias: { // 修改 Vue 被导入时候的包的路径【用于main.js中的 import Vue from 'vue'】
			'vue$': 'vue/dist/vue.js'
		}
	}
}